<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue插值操作</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
<!--
■v-cloak标签的作用就是在程序执行过程中，执行到这里的时候，会不去显示标签里的内容，因为上面css已经指定了v-cloak标签属性所在的标签下的内容不显示，也就是
display: none,表示不进行显示，这么做的好处是什么呢，因为程序是至上而下的执行，刚开始的时候，html标签里的内容最开始会按照传统html的方式进行显示，之后在
到达js时,新建了vue对象，才对之前的表亲内容进行一个解析，也就是替换之前已经显示的内容，说明这里显示了两次，这个v-cloak标签属性的作用就是在第一次不去显示，当
vue开始真正开始解析时，就会去掉所有的v-cloak这个标签属性，之前针对这个标签的css就不起作用了,然后显示解析后的内容，也就不会显示两次，因为显示两次之间时间比较快，
所以我们可能没感觉，但是这就是它的显示过程，很明显这种不符合要求，要是计算机或者什么情况导致浏览器刷新变慢，你就会看到这种前后闪烁替换的刷新效果，影响体验
-->
<div id="app" v-cloak>

  <!-- ■【Mustache语法，也就双大括号，包裹的数据数据是响应式的，也就是可以实时替换 ,它的作用范围是在内容中，不是在标签上】-->

  <!--  mustache语法中普通值替换-->
  <h2>{{message}}</h2>
  <h2>{{message}} , 世界</h2>

  <!--  mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
  <h2>{{firstName + lastName}}</h2>
  <h2>{{firstName + "," + lastName}}</h2>
  <h2>{{firstName}}{{lastName}}</h2>
  <h2>{{counter * 2}}</h2>

  <!--  ■v-once会让标签只在第一次加载该message的值，后续message改变不会随着数据改变进行实时响应式改变,意思是message的值不会随着js中message变量的变化而变化-->
  <h2 v-once>{{message}}</h2>

  <!--  只是简单的替换成文本值，并不会去识别到该标签-->
  <h2>{{url}}</h2>
  <!--  ■利用v-html标签属性，可以清晰的告诉vue这里替换成html式的标签，并能够被解析识别后渲染出效果-->
  <h2 v-html="url"></h2>

  <!--  ■v-text标签属性会获得message的值，并把标签里的内容替换成message的值,v-text不够灵活，一般不使用-->
  <h2 v-text="message">世界</h2>

  <!--  ■v-pre标签属性会将原封不动显示标签里的内容，也就是并不会去解析它，标签里怎么写的就怎么显示，就是把标签里的文本内容视作普通文本-->
  <h2 v-pre>{{message}},世界</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "你好呀",
      firstName: "篮球",
      lastName: "鸡你太美",
      counter: 100,
      url: "<a href='http://www.baidu.com'>百度一下</a>"
    }
  });
</script>
</body>
</html>